body {
  width: 100vw;
  height: 100vh;
  display: grid;
  perspective: 900px;
  background-color: #2c3e50;
}
$duration: 6s;
main {
  width: 400px;
  height: 200px;
  border: solid 1px #ddd;
  align-self: center;
  justify-self: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  &:hover {
    section,
    ul > li:nth-child(1)::after {
      animation-play-state: paused;
    }
  }
  section {
    display: grid;
    width: 2400px;
    grid-template: 200px / repeat(6, 400px);
    animation-name: slide;
    animation-duration: $duration;
    animation-timing-function: steps(6, end);
    animation-iteration-count: infinite;
    div {
      overflow: hidden;
    }
  }
  @keyframes slide {
    to {
      transform: translateX(-2400px);
    }
  }

  ul {
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    li {
      position: relative;
      &::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ddd;
        border: solid 1px #aaa;
        margin: 5px;
        opacity: 0.6;
        position: relative;
      }
      &:nth-child(1)::after {
        content: '';
        position: absolute;
        margin: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        opacity: 0.8;
        background-color: #333;
        border: solid 1px #aaa;
        top: 0;
        left: 0;
        animation-name: li-move;
        animation-iteration-count: infinite;
        animation-duration: $duration;
        animation-timing-function: steps(6, end);
        z-index: 2;
        @keyframes li-move {
          to {
            transform: translateX(calc(6 * 100% + 6 * 10px));
          }
        }
      }
    }
  }
}

body:hover main {
  //   transform: rotateY(360deg);
}
